﻿
@{
    ViewBag.Title = "Part6_1";
    Layout = "~/Views/Shared/_LayoutPart6.cshtml";
}


<div class="con left">
    <!--数据总概-->
    <div class="con_div">
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <div class="left text01_div">
                    <p>隐患总数</p>
                    <p>266</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <div class="left text01_div">
                    <p>已整改数</p>
                    <p>122</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <div class="left text01_div">
                    <p>整改完成率</p>
                    <p class="sky">62%</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <div class="left text01_div">
                    <p>本月隐患</p>
                    <p class="sky">10</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <div class="left text01_div">
                    <p>本月已整改</p>
                    <p class="sky">6</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <div class="left text01_div">
                    <p>本月完成率</p>
                    <p class="sky">60%</p>
                </div>
            </div>
        </div>
    </div>
    <div class="div_any">
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title">各厂区隐患占比</div>
                <p id="FactoryAreaChart" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title">隐患分类占比</div>
                <p id="TypeChart" class="p_chart"></p>
            </div>
        </div>
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title">整改过期占比</div>
                <p id="OvertimeChart" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title">近一年每月隐患总数</div>
                <p id="MonthChart" class="p_chart"></p>
            </div>
        </div>
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title">本月各厂区隐患占比</div>
                <p id="FactoryAreaMonth" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title">每月整改趋势</div>
                <p id="MonthComplete" class="p_chart"></p>
            </div>
        </div>
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title">本月隐患分类占比</div>
                <p id="MonthType" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"></div>
                <p id="pieChart2" class="p_chart"></p>
            </div>
        </div>
    </div>



</div>
<script>
    $("#part6_1").attr("class", "nav_active");
    LoadData();
    function LoadData() {
        setTimeout(function () {
            GetChartByFactoryArea();
            GetChartByType();
            GetChartOvertime();
            GetChartMonthTimes();
            GetChartByMonthFactoryArea();
            GetMonthComplete();
            GetChartByMonthType();
        }, 2000);
        setInterval(function () {

        }, 30000);
    }
    function GetChartByFactoryArea() {
        var option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['大场', '浦东'],
                textStyle: {
                    color: 'white'
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['80%', '60%'],
                    data: [
                        { value: 122, name: '大场' },
                        { value: 106, name: '浦东' }
                    ],
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83', '#E98F6F'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart1 = echarts.init(document.getElementById('FactoryAreaChart'));
        myChart1.setOption(option);
    }

    function GetChartByType() {
        var option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['设备缺陷', '人员违章', '环境缺陷', '管理缺陷'],
                textStyle: {
                    color: 'white'
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 22, name: '设备缺陷' },
                        { value: 42, name: '人员违章' },
                        { value: 55, name: '环境缺陷' },
                        { value: 18, name: '管理缺陷' },
                    ],
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83', '#E98F6F'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart1 = echarts.init(document.getElementById('TypeChart'));
        myChart1.setOption(option);
    }

    function GetChartOvertime() {
        var option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['已过期', '未过期'],
                textStyle: {
                    color: 'white'
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 18, name: '已过期' },
                        { value: 203, name: '未过期' },
                    ],
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#C23531', '#749F83', '#2F4554', '#C23531', '#749F83', '#E98F6F'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart1 = echarts.init(document.getElementById('OvertimeChart'));
        myChart1.setOption(option);
    }

    function GetChartMonthTimes() {
        var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
        var histogramChart1 = echarts.init(document.getElementById('MonthChart'));
        histogramChart1.setOption({

            color: ['#5bc0de'],
            grid: {
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a}<br/>{b} {c}起"
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: '#5bc0de'
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 40,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#5bc0de'
                        },
                    },
                    splitLine: {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: function (value) {
                            return value + ""
                        },
                    },
                }
            ],
            series: [
                {
                    name: '',
                    type: 'bar',
                    barWidth: 20,
                    data: [21, 23, 16, 25, 20, 12, 17, 30, 27, 13, 22, 10],
                },
            ]
        })
    }

    function GetChartByMonthFactoryArea() {
        var option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['大场', '浦东'],
                textStyle: {
                    color: 'white'
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 12, name: '大场' },
                        { value: 17, name: '浦东' }
                    ],
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                var colorList = ['#E98F6F', '#61A0A8', '#2F4554', '#C23531', '#749F83', '#E98F6F'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart1 = echarts.init(document.getElementById('FactoryAreaMonth'));
        myChart1.setOption(option);
    }

    function GetMonthComplete() {
        var lineChart2 = echarts.init(document.getElementById('MonthComplete'));
        lineChart2.setOption({
            title: {
                text: '',
                textStyle: {
                    fontSize: 16,
                    color: '#32cd32'
                },
                x: "center"
            },
            color: ["#32cd32"],
            grid: {
                left: '15%',
                right: '5%',
                bottom: '25%'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a}<br/>{b}<br/>{c}人"
            },

            calculable: true,
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#32cd32'
                        },
                    },
                    splitLine: {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: function (value) {
                            return value + ""
                        },
                    },
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'],
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#32cd32'
                        },
                    },
                    splitLine: {
                        "show": false
                    },
                    axisLabel: {
                        // interval:0,
                        // rotate:40,
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: function (value) {
                            return value + ""
                        },
                    },
                }
            ],
            series: [
                {
                    name: '',
                    type: 'line',
                    smooth: true,
                    itemStyle: { normal: { areaStyle: { type: 'default' } } },
                    data: [21, 14, 10, 25, 24, 11, 16, 9, 24, 33, 15, 26]
                },
            ]

        })
    }

    function GetChartByMonthType() {
        var pieChart1 = echarts.init(document.getElementById('MonthType'));
        pieChart1.setOption({
            color: ["#32cd32", "#ff7f50", "#87cefa", "#FD6C88", "#4b5cc4", "#faff72"],
            tooltip: {
                trigger: 'item',
                formatter: "{a}<br/>{b}<br/>{c}次"
            },
            calculable: true,
            series: [
                {
                    name: '隐患发生',
                    type: 'pie',
                    radius: [30, 90],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    x: '50%',



                    sort: 'ascending',
                    data: [
                        { value: 5, name: '设备缺陷' },
                        { value: 6, name: '人员违章' },
                        { value: 9, name: '环境缺陷' },
                        { value: 2, name: '管理缺陷' },
                    ]
                }
            ]
        })
    }
</script>

